<template>
  <demoBlock title="组件调用">
    <vcu-cell is-link value="组件调用" @click="show = true" />

    <vcu-image-preview v-model:show="show" :images="images" @change="onChange">
      <template v-slot:index>第{{ index }}页</template>
    </vcu-image-preview>
  </demoBlock>
</template>

<script>
import { defineComponent, getCurrentInstance, ref } from "vue";
export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const images = [
      `${proxy.serverIp}/images/car.jpg`,
      `${proxy.serverIp}/images/j20.jpg`,
      `${proxy.serverIp}/images/588ku.jpg`,
      `${proxy.serverIp}/images/om.jpg`,
    ];
    const show = ref(false);
    const index = ref(0);
    const onChange = (newIndex) => {
      index.value = newIndex;
    };

    return {
      show,
      images,
      index,
      onChange,
    };
  },
});
</script>
